<template>
  <div>
    <!-- 二级路由 -->
    <transition enter-active-class="animate__animated animate__bounceInLeft">
      <router-view></router-view>
    </transition>

    <!-- 底部导航 -->
    <footer>
      <router-link active-class="active" to="/index/home"><i class="iconfont icon-shouye"></i> 首页</router-link>
      <router-link active-class="active" to="/index/cate"><i class="iconfont icon-fenlei"></i> 分类</router-link>
      <router-link active-class="active" to="/index/shop"><i class="iconfont icon-gouwucheman"></i> 购物车</router-link>
      <router-link active-class="active" to="/index/mine"><i class="iconfont icon-wode"></i> 我的</router-link>
    </footer>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
@import "../../less/index.less";
footer {
  width: 100vw;
  height: 1rem;
  display: flex;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  border-top: 0.01rem solid #ccc;
}
footer a {
  flex: 1;
  text-align: center;
  margin-top: 0.1rem;
}
.active {
  color: @primary;
}
i{
  display: block;
}
</style>